<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item
                  label="客户姓名"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-input
                    placeholder="请输入客户姓名"
                    v-model="model.customerName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item
                  label="客户电话"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-input
                    placeholder="请输入客户电话"
                    v-model="model.contactTel"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="6">
                <a-form-item
                  style="text-align: right"
                  :labelCol="{ span: 10 }"
                  :wrapperCol="{ span: 18, offset: 10 }"
                >
                  <a-button type="primary" size="large" @click="search" ghost
                    >查询</a-button
                  >
                  <a-button type="primary" size="large" @click="reset" ghost
                    >重置</a-button
                  >
                  <a-button type="primary" size="large" v-has="'customer:export'" ghost @click="Export">导出</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top: 15px">
          <a-table
            style="height: 500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="customerList"
            :pagination="ipagination"
            :loading="loading"
           :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="showDrawer(record)">详情</a>
            </span>
          </a-table>
        </div>
        <!-- 详情弹框 -->
      </a-card>
    </a-col>
    <!-- 详情 -->
    <div>
      <a-drawer
        title="详情"
        :closable="false"
        :width="474"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :style="pstyle1">
            <a-col
              ><div class="customer_title flex flex-a-c">
                <span>{{ customerInfo.contactTel }}</span>
                <span>{{ customerInfo.createBy }}</span>
              </div></a-col
            >
          </a-row>
          <a-divider />
          <a-row :style="pstyle2" v-for="(item, index) in customerLists" :key="index">
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">业务类型</span>
              <div class="data sapntag_text">{{ item.name }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索状态</span>
              <div class="data sapntag_text">
                {{
                  item.status == 1
                    ? "待分配"
                    : item.status == 2
                    ? "待确认"
                    : item.status == 3
                    ? "已分配"
                    : item.status == 4
                    ? "已跟进"
                    : item.status == 5
                    ? "已成单"
                    : item.status == 6
                    ? "已流单"
                    : ""
                }}
              </div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索编号</span>
              <div class="data sapntag_text">{{ item.leadsCode }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">订单编号</span>
              <div class="data sapntag_text">{{ item.orderNo || '' }}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">跟进人</span>
              <div class="data sapntag_text">{{item.updateBy||''}}</div>
            </a-col>
            <a-col class="flex flex-a-c flex-j-s-b">
              <span class="sapntag data">线索提交人</span>
              <div class="data sapntag_text">{{item.leadsSubmitter||''}}</div>
            </a-col>
          </a-row>
          <a-divider />
        </a-form>
      </a-drawer>
    </div>
  </a-row>
</template>
<script>
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getCustomerList, getCustomerById } from "@/api/customer";
import moment from "moment";

export default {
  name: "RoleUserList",
  mixins: [JeecgListMixin],
  components: {
    moment,
  },
  data() {
    return {
      selectedRowKeys:[],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      }, //分页
      //customerName: 'customerName', //客户姓名
      contactTele: "", //客户电话
      names: "", //用户姓名
      telephone: "", //电话号码
      business: "", //业务分类
      clue: "", // 线索状态
      number: "", //线索编号
      Ordernumber: "", //订单编号

      // 抽屉样式1
      pstyle1: {
        fontSize: "20px",
        color: "#656565",
      },
      pstyle2: {
        fontSize: "15px",
        // borderTop: '1px solid #e8e8e8',
        width: "100%",
        left: 0,
        padding: "20px 10px",
        lineHeight: "30px",
      },
      form: {},
      visible: false, //详情抽屉
      columns: [
        {
          title: "客户姓名",
          align: "center",
          dataIndex: "customerName",
        },
        {
          title: "客户手机号",
          align: "center",
          dataIndex: "contactTel",
        },
        {
          title: "成单数",
          dataIndex: "orderFormNum",
          align: "center",
        },
        {
          title: "创建人",
          align: "center",
          dataIndex: "createBy",
        },
        // {
        //   title: "开发员",
        //   align: "center",
        //   dataIndex: "",
        // },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      customerList: [], //表格数据
      customerDetails: {}, //客户详情
      customerInfo: {}, //详情用户
      model: {
        customerName: "", // 客户名称
        contactTel: "", // 客户电话
      }, //查询条件对象
      customerLists: [
      
      ], //详情线索订单
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    Export() {
      const token = JSON.parse(window.localStorage.getItem('pro__Access-Token')).value;
      const selections = this.selectedRowKeys.toString()
      window.open(
        `https://jbd.iminggu.com/jeecg-boot/jbd/jbdCustomer/exportXls?selections=${selections}&token=${token}`
      );
    },
    // 获取列表数据
    async getList() {
      const setData = {
        customerName: this.model.customerName,
        contactTel: this.model.contactTel,
      };
      //console.log(setData)
      const res = await getCustomerList(setData);
      if (res.code == 200) {
        this.customerList = res.result.records;
      }
      console.log(res);
    },
    // 搜索按钮事件触发
    search() {
      this.getList();
    },
    // 重置
    reset() {
      this.$set(this.model, "customerName", "");
      this.$set(this.model, "contactTel", "");
      this.getList();
    },
   onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //弹窗功能
    async showDrawer(record) {
      const res = await getCustomerById({ id: record.id });
      //console.log(res)
      this.customerDetails = res.result;
      this.customerInfo = res.result.jbdCustomer;
      this.customerLists = res.result.customerLeads
      this.visible = true;
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>
<style scoped lang="less">
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.sapntag {
  color: #000;
}
.data {
  display: inline-block;
  padding: 0px 10px;
}
.sapntag_text {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bbbbbb;
}

.customer_title {
  width: 100%;
  height: 60px;
  background: #fafafa;
  span:nth-child(1) {
    margin: 0 20px;
  }
}
/deep/.ant-drawer-body {
  padding: 0;
}
/deep/ .ant-divider-horizontal{
  margin: 0;
}
</style>
